<template>
  <view class="wrapper" :style="specialStyle">
    <view class="majorFilterContainer">
      <view class="firstListContainer">
        <u-tabs
          :list="majorFirstList"
          bg-color="transparent"
          :height="100"
          inactive-color="#222"
          active-color="#222"
          :bar-style="{ display: 'none' }"
          name="navName"
          :is-scroll="true"
          :current="selectedFirstIndex"
          @change="handleFirstItemClick"
          :gutter="28"
          :active-item-style="tabActiveStyle"
        >
        </u-tabs>
        <view class="firstListFilterButton" @click="firstFilterShow = true">
          <img
            :src="subjectChoiceMajorFilterIcon"
            alt=""
            class="firstListFilterButtonImg"
          />
          <span>筛选</span>
          <view class="fakeElement"> </view>
        </view>
      </view>
      <view class="mainListContainer">
        <scroll-view
          :scroll-y="true"
          :scroll-top="scrollSecondTop"
          scroll-with-animation
          class="secondPositionList"
        >
          <view
            :class="{
              SecondPositionItem: true,
              'u-line-2': true,
              selectedSecond: item.navId == selectedSecondId,
            }"
            v-for="(item, index) in secondPositionList"
            :key="index"
            @click="handleSecondItemClick(item, index)"
          >
            <span v-if="item.navName == '热门'" class="hotSecondPosition">
              <img
                src="https://img3.job1001.com/ypMp/elan/images/career/hotSecondPosition.png"
              />
              {{ item.navName }}</span
            >
            <span v-else>{{ item.navName }}</span>
            <div
              class="radiuBorder"
              v-if="item.navId == selectedSecondId"
            ></div>
            <div
              class="topRadiuBorder"
              v-if="item.navId == selectedSecondId"
            ></div>
          </view>
        </scroll-view>
        <scroll-view
          :scroll-y="true"
          scroll-with-animation
          class="thirdPositionList"
          :scroll-into-view="scollThirdToView"
          @scroll.native="handleScroll"
          ref="scollView"
        >
          <view
            class="ThirdPositionItem"
            v-for="(item, index) in secondPositionList"
            :key="index"
            :id="`third-${index}`"
          >
            <view :class="{ thirdTitle: true, fixedTitle: item.isFixTitle }">
              <template v-if="item.navName == '热门'">
                {{ item.navName }}
                <text class="titleTip"
                  >大家都在搜的{{ selectedFirstName }}职业</text
                >
              </template>
              <template v-else>
                {{ item.navName }}
                <text class="titleTip"
                  >({{ item.children.length || "0" }}个)</text
                >
                <image class="titleImage" :src="item.navPhoto"></image>
              </template>
            </view>
            <view class="thirdChildrenList">
              <view
                class="thirdChildrenItem"
                v-for="(_item, _index) in item.children"
                :key="_index"
                @click="handleThirdItemClick(_item)"
              >
                <view class="thirdChildrenItemTitle">
                  {{ _item.navName }}
                </view>
                <view class="thirdChildrenItemTags">
                  <view class="tagItem">
                    <span class="tagLabel">对应学校</span>
                    <span class="tagValue"
                      >{{ _item.subjectStat.collegeNum }}所</span
                    >
                  </view>
                  <view class="tagItem">
                    <span class="tagLabel">平均薪酬</span>
                    <span class="tagValue"
                      >¥{{ _item.subjectStat.averageSalary }}</span
                    >
                  </view>
                  <view class="tagItem">
                    <span class="tagLabel">对应专业</span>
                    <span class="tagValue"
                      >{{ _item.subjectStat.professionNum }}个</span
                    >
                  </view>
                  <view class="tagItem">
                    <span class="tagLabel">招聘热度</span>
                    <span class="tagValue">{{ _item.subjectStat.hotNum }}</span>
                    <span
                      :class="{
                        tagIcon: true,
                        upTrend: _item.subjectStat.hotTrend == 1,
                        downTrend: _item.subjectStat.hotTrend == 2,
                        noTrend: _item.subjectStat.hotTrend == 0,
                      }"
                    ></span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <u-select
      v-model="firstFilterShow"
      :list="majorFirstList"
      value-name="navId"
      label-name="navName"
      @confirm="handleFirstFilterConfirm"
    ></u-select>
  </view>
</template>

<script>
import { getPositionTagList, getPositionTagTree } from "@/api/modules/major";
import {
  addBuryingPoint,
  customerNavigationTree,
  customerVavAllPositions,
} from "@/api/modules/career";
export default {
  name: "majorFilterList",
  props: {
    cateType: {
      type: String,
      default: "30",
    },
    specialStyle: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      firstFilterShow: false,
      majorFirstList: [],
      secondPositionList: [],
      ThirdPositionList: [],
      selectedFirstId: "", //第一层选中的id
      selectedFirstName: "", //第一层选中的名字
      selectedFirstIndex: "", //第一层选中的下标
      scollFirstToView: "", //控制第一层筛选容器滚动的变量
      selectedSecondId: "", //第二层选中的id
      selectedSecondIndex: 0, //第二层选中的下标
      scrollSecondTop: 0, //第二层的滚动高度
      scollThirdToView: "", //控制第三层筛选容器滚动的变量
      distance: 0,
      isClickTab: false, //是否是点击滚动
      secondHeightArr: [], //第二层每一个专业的高度
      heightArr: [], //第三层每一个二级专业的高度
      tabActiveStyle: {
        "justify-content": "center",
        "align-items": "center",
        border: "4rpx solid #f75a3e",
        background: "linear-gradient(180deg, #ffece9 0%, #ffffff 100%)",
        "border-radius": "12rpx",
        "line-height": "98rpx",
      },
      buryingPointId: "",
      cardType: "",
      subjectChoiceMajorFilterIcon:
        this.$imgBaseSelf + "subjectChoiceMajorFilterIcon.png",
    };
  },
  methods: {
    handleFirstFilterConfirm(val) {
      let targetIndex = "";
      this.majorFirstList.find((item, index) => {
        if (item.navId == val[0].value) {
          targetIndex = index;
        }
      });
      this.selectedFirstIndex = targetIndex;
      this.handleFirstItemClick(targetIndex);
    },
    //专科本科改变将index设为0
    currentIndexZero() {
      this.selectedFirstIndex = 0;
    },
    //获取第一层
    reqGetCustomerNavigationTree() {
      customerNavigationTree({
        tagLevel: "1",
        tagType: "10",
        cateType: this.cateType,
      })
        .then((res) => {
          if (res.code == 200) {
            this.majorFirstList = res.data || [];
            if (res.data.length) {
              this.selectedFirstId = res.data[0].navId;
              this.selectedFirstName = res.data[0].navName;
              this.reqGetcustomerVavAllPositions(res.data[0].navId);
              // //处理第二层
              // this.secondPositionList = res.data[0].children || [];
              // this.selectedSecondId = this.secondPositionList.navId;
              // this.cacSecondHeight();
              // this.cacHeight();
              // this.selectedSecondIndex = 0;
              // this.isClickTab = true;
              // setTimeout(() => {
              //   this.isClickTab = false;
              // }, 300);
              // this.scollThirdToView = ""; //需要先重置一下
              // setTimeout(() => {
              //   this.scollThirdToView = "third-0"; //重置一下第三层滚动
              //   this.$set(
              //     this.secondPositionList[this.selectedSecondIndex],
              //     "isFixTitle",
              //     true
              //   );
              // });

              this.scollFirstToView = ""; //需要先重置一下
              setTimeout(() => {
                this.scollFirstToView = "first-0"; //重置一下第三层滚动
              });
            }
          }
        })
        .catch((err) => {});
    },
    //获取第二层
    reqGetcustomerVavAllPositions(navId) {
      //根据一级专业Id获取二级和三级列表，每次tab点击都会调用
      customerVavAllPositions({
        parentId: navId,
      })
        .then((res) => {
          if (res.code == 200) {
            this.secondPositionList = res.data || [];
            this.selectedSecondId = res.data[0].navId;
            this.cacSecondHeight();
            this.cacHeight();
            this.selectedSecondIndex = 0;
            this.isClickTab = true;
            setTimeout(() => {
              this.isClickTab = false;
            }, 300);
            this.scollThirdToView = ""; //需要先重置一下
            setTimeout(() => {
              this.scollThirdToView = "third-0"; //重置一下第三层滚动
              this.$set(
                this.secondPositionList[this.selectedSecondIndex],
                "isFixTitle",
                true
              );
            });
          }
        })
        .catch((err) => {});
    },
    handleFirstItemClick(index) {
      this.selectedFirstId = "";
      const item = this.majorFirstList[index];
      this.selectedFirstId = item.navId;
      this.selectedFirstName = item.navName;
      this.selectedFirstIndex = index;
      this.scollFirstToView = "first-" + index;
      this.reqGetcustomerVavAllPositions(item.navId);
    },
    handleSecondItemClick(item, index) {
      if (this.isClickTab) return;
      this.isClickTab = true;
      setTimeout(() => {
        this.isClickTab = false;
      }, 500);
      this.selectedSecondId = item.navId;
      this.selectedSecondIndex = index;
      this.scollThirdToView = "";
      this.$nextTick(() => {
        this.scollThirdToView = "third-" + index;
      });
    },
    handleThirdItemClick(_item) {
      const { collegeNum, professionNum } = _item.subjectStat;
      uni.navigateTo({
        url: `/pagesSub/nationalCollegeEntranceExamination/jobMatch/index?positionId=${_item.valueId}&positionName=${_item.navName}&collegeNum=${collegeNum}&professionNum=${professionNum}`,
      });
    },
    handleScroll(e) {
      if (this.isClickTab) return;
      let scrollTop = e.detail.scrollTop; //获取距离顶部的距离;
      //现在的item的高度
      const nowHeight = this.heightArr[this.selectedSecondIndex];
      //上一个的高度
      const preHiehgt = this.heightArr[this.selectedSecondIndex - 1];
      //处理第三层的滚动
      if (scrollTop > nowHeight) {
        this.selectedSecondId =
          this.secondPositionList[this.selectedSecondIndex + 1].navId;
        this.selectedSecondIndex += 1;
        //如果滚动到顶部以后了，那就得固定一下title
        this.$set(
          this.secondPositionList[this.selectedSecondIndex],
          "isFixTitle",
          true
        );
      } else if (scrollTop < preHiehgt) {
        if (this.secondPositionList[this.selectedSecondIndex - 1]) {
          this.selectedSecondId =
            this.secondPositionList[this.selectedSecondIndex - 1].navId;
          this.selectedSecondIndex -= 1;
          this.$set(
            this.secondPositionList[this.selectedSecondIndex],
            "isFixTitle",
            true
          );
        }
      }
      //处理二级跟随滚动
      this.scrollSecondTop =
        this.secondHeightArr[this.selectedSecondIndex] -
        parseInt(this.specialStyle.height.slice(0, -2) / 2);
    },
    cacHeight() {
      this.$nextTick(() => {
        let list = [];
        let height = 0;
        const query = uni.createSelectorQuery().in(this);
        query.selectAll(".ThirdPositionItem").boundingClientRect();
        query.exec((res) => {
          res[0].forEach((item) => {
            height += parseInt(item.height);
            list.push(height);
          });
          this.heightArr = list;
        });
      });
    },
    //计算二级的每个高度
    cacSecondHeight() {
      this.$nextTick(() => {
        let list = [];
        let height = 0;
        const query = uni.createSelectorQuery().in(this);
        query.selectAll(".SecondPositionItem").boundingClientRect();
        query.exec((res) => {
          res[0].forEach((item) => {
            height += parseInt(item.height);
            list.push(height);
          });
          this.secondHeightArr = list;
          console.log("secondHeightArr", this.secondHeightArr);
        });
      });
    },
  },
  created() {
    this.reqGetCustomerNavigationTree();
  },
  watch: {
    cateType(newValue, oldValue) {
      if (newValue) {
        this.reqGetCustomerNavigationTree();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  margin-top: 28rpx;
  width: 100vw;
  min-height: 400rpx;
  overflow: hidden;

  .majorFilterContainer {
    .firstListContainer {
      position: relative;
      // display: flex; 不能设置flex会导致不能滚动
      height: 100rpx;
      // padding: 0 32rpx;
      width: 100vw;
      margin-top: 20rpx;
      margin-bottom: 38rpx;
      padding-right: 94rpx;
      box-sizing: border-box;
      overflow: visible;
      // white-space: nowrap; /* 禁止换行，很重要 */
      // overflow-x: hidden; /* 显示滚动条 */
      // scroll-snap-type: x mandatory; /* 开启滚动吸附 */
      .firstListItem {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        scroll-snap-align: center;
        /* 设置吸附位置 */
        height: 100rpx;
        padding: 0 28rpx;
        margin-right: 16rpx;
        border-radius: 12rpx;
        border: 2rpx solid #e4e5f5;
        background: linear-gradient(180deg, #ebf5fe 0%, #ffffff 100%);

        &.selectedFirst {
          border: 4rpx solid #f75a3e;
          background: linear-gradient(180deg, #ffece9 0%, #ffffff 100%);
        }

        &:last-of-type {
          margin-right: 0rpx;
        }
      }
      .firstListFilterButton {
        position: absolute;
        top: -12rpx;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 94rpx;
        padding: 22rpx 24rpx 24rpx 24rpx;
        background: #eefaff;
        .firstListFilterButtonImg {
          width: 48rpx;
          height: 48rpx;
          margin-bottom: 2rpx;
        }
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #585656;
          line-height: 32rpx;
        }
        .fakeElement {
          position: absolute;
          left: -112rpx;
          top: 0;
          width: 120rpx;
          height: 126rpx;
          background: linear-gradient(
            270deg,
            #eefaff 0%,
            rgba(255, 255, 255, 0) 100%
          );
        }
      }
    }
  }

  .mainListContainer {
    display: flex;
    .secondPositionList {
      width: 224rpx;
      height: calc(100vh - 600rpx);
      background-color: #f4f6f8;
      .SecondPositionItem {
        display: flex;
        align-items: center;
        padding-left: 32rpx;
        height: 100rpx;
        background: #f4f6f8;
        color: #666666;

        span {
          text-align: left;
          max-width: 160rpx;
          font-size: 26rpx;
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
        }

        .hotSecondPosition {
          display: inline-flex;
          justify-content: flex-start;
          align-items: center;

          img {
            width: 28rpx;
            height: 36rpx;
            margin-right: 14rpx;
          }
        }
      }

      .selectedSecond {
        position: relative;
        background: #ffffff;
        font-weight: bold;
        color: #222222;
        overflow: visible;
        .radiuBorder {
          position: absolute;
          bottom: -30rpx;
          right: 0rpx;
          height: 30rpx;
          width: 30rpx;
          background-image: url($img-base + "career/positionDictionary/radiuBorder.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .topRadiuBorder {
          position: absolute;
          top: -30rpx;
          right: 0rpx;
          height: 30rpx;
          width: 30rpx;
          background-image: url($img-base + "career/positionDictionary/topRadiuBorder.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .thirdPositionList {
      position: relative;

      height: calc(100vh - 600rpx);
      background-color: white;
      margin-left: -2rpx;

      .ThirdPositionItem {
        display: flex;
        flex-direction: column;
        border-bottom: 10rpx solid #f4f6f7;

        &:last-of-type {
          overflow: hidden;
          border-bottom: none;
          padding-bottom: 100rpx;
        }

        .thirdTitle {
          position: relative;
          display: flex;
          align-items: center;
          width: 538rpx;
          height: 100rpx;
          padding: 0rpx 32rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          .titleTip {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            line-height: 30rpx;
            padding-left: 16rpx;
          }
          .titleImage {
            position: absolute;
            right: 36rpx;
            width: 100rpx;
            height: auto;
          }
        }

        .fixedTitle {
          position: sticky;
          top: -40rpx;
          height: 100rpx;
          z-index: 2;
          background-color: white;
        }

        .thirdChildrenList {
          display: flex;
          flex-direction: column;

          .thirdChildrenItem {
            display: flex;
            flex-direction: column;
            // width: 538rpx;
            min-height: 124rpx;

            padding: 24rpx 0;
            margin: 0 32rpx;
            border-bottom: 1.2rpx solid #f5f5f5;

            .thirdChildrenItemTitle {
              font-size: 28rpx;
              font-family: PingFangSC;
              font-weight: bold;
              color: #222222;
              line-height: 30rpx;
              margin-bottom: 26rpx;
            }

            .thirdChildrenItemTags {
              display: flex;
              flex-wrap: wrap;
              .tagItem {
                display: flex;
                align-items: center;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #bfbfbf;
                line-height: 28rpx;
                width: 50%;
                margin-bottom: 8rpx;
                .tagLabel {
                  color: #bfbfbf;
                  font-size: 20rpx;
                  margin-right: 16rpx;
                }
                .tagValue {
                  color: #333333;
                  font-size: 20rpx;
                  font-weight: bold;
                }
                .tagIcon {
                  width: 20rpx;
                  height: 20rpx;
                  margin-left: 8rpx;
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                  &.upTrend {
                    background-image: url($img-base + "careerPath/majorTrendUp.png");
                  }
                  &.downTrend {
                    background-image: url($img-base + "careerPath/majorTrendDown.png");
                  }
                  &.noTrend {
                    background-image: url($img-base + "careerPath/majorTrendNo.png");
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.u-tab-item {
  border: none;
  background: #f5f5f5;
}
</style>
